首先先從簡單的概念開始，一般我們提到網頁程式設計，由三個主要要素組成，分別為HTML、CSS、JavaScript，分別說明如下：

• HTML：以元件為單位，建構出基本的網頁框架，各元件大如安排瀏覽區塊、分頁區塊、主要內容區塊，小至各個按鈕、表單。
• CSS：可針對元件進行美化，如字體顏色、字體大小，及排版布局的設計與安排。
• JavaScript：可寫入各種功能與事件，如可對應網頁瀏覽者點擊的動作，撰寫跳出填寫表單、或確認等功能，增加網頁與瀏覽者的互動。

目前以ChatGPT，已經可以針對自己設計的畫面，請他提供基本HTML及CSS的程式架構，因此可以大幅減少入門網頁程式設計的門檻，甚至第一次跑出來的結果，就已經完成大部分的必要元件，後續的工作僅剩下微調各區塊與排版，以符合自己規劃的藍圖。

有鑑於此，現在網頁程式設計，推薦第一個先去看大家平常習慣的排版架構，基本款通常包括sidebar(側邊欄)、navbar(導覽列)、body/main(主要內容區)、footer(頁尾)，然後自己先設計版面，直接用小畫家畫，或是用Whimsical設計網頁，到時候可直接截圖給ChatGPT，請他直接針對該版面產出程式碼。

有個小技巧是，可以將各元件外框都刻意先畫出來，方便ChatGPT辨識及撰寫對應的程式碼。後來我才知道，有種東西叫做「線框圖」，可針對網頁各區塊設計配置，就很類似這種概念，初學時先針對簡單版面了解就好，讓自己對網頁的常見功能區塊有個雛形認識即可。